w<template>
	<div id="header">
		<div class="swiper">
			
			<!--轮播图组件-->
			<Swipe :autoplay="3000">
			  <SwipeItem v-for="item in willplayList" :key="item.id">
			  	<img :src="item.cover.origin"/>
			  </SwipeItem>
			  
			</Swipe>
		</div>
		<ul class="list">
			<li class="item mg_top_10"v-for="item in playingList" :key="item.id">
				<img :src="item.cover.origin"/>
				<div class="disc">
					<div class="left">
						<p class="name ft_sz_12">{{item.name}}</p>
						<p class="count ft_sz_12 color_01">{{item.cinemaCount}}家影院上映{{item.watchCount}}人购票</p>
					</div>
					<div class="right ft_sz_18 color_02">
						{{item.grade}}
					</div>
				</div>
				
			</li>
			<li class="more_button">
				<router-link to="/films">更多热映电影</router-link>
			</li>
			
		</ul>
		<div class="soon">
			<div class="upcoming">即将上映</div>
		</div>
		
		
		<!--即将播放列表-->
		<ul class="list">
			<li class="item mg_top_10"v-for="item in willplayList" :key="item.id">
				<img :src="item.cover.origin"/>
				<div class="disc">
					<div class="left">
						<p class="name ft_sz_12">{{item.name}}</p>
							
					</div>
					<div class="date color3">
						{{releaseDate(item.premiereAt)}}
					</div>
					
				</div>
				
			</li>
			<li class="more_button">
				<router-link to="/films">更多即将上映电影</router-link>
			</li>
		</ul>
		
		
	</div>
	
	
	
</template>

<script>
	import { Swipe, SwipeItem } from 'vant';
	import { ajax } from '@/utils/index'
	export default {
		data() {
			return{
				//正在播放
				playingList:[],
				// 即将上映
				willplayList:[]
			}
		},
		components:{
			Swipe, 
			SwipeItem
		},
		created(){
			let url1 = 'now-playing';
			this.getList(url1,5);
			let url2 = 'coming-soon';
			this.getList(url2,3);
			this.$store.commit('updateTitle','卖座电影');
//			this.$store.dispatch('updateTitle','卖座电影2');
		},
		
		
		
		methods: {
			/*
			 * 獲取正在播放和即將播放列表
			 * 
			 */
			
			getList(name,count){
				let url = `/v4/api/film/${name}`;
				let data ={
					page: 1,
					count
				}
				ajax(url,data,(res)=> {
					console.log(res);
					if(name === 'now-playing'){
						this.playingList = res.films
					}else{
						this.willplayList = res.films
					}
				})
			},
			releaseDate(times){
				
				let time = new Date(times);
				let day = time.getDate();
				let month = time.getMonth() + 1;
				return `${month}月${day}日上映`;
			}
		}
	}
	
</script>

<style scoped="true" lang="less">
	.swiper {
		height: 2.11rem;
		background: gray;
	}
	.list {
		padding: 0 .17rem;
		.item {
			img {
				height: 1.92rem;
				width: 100%;
			}
			
		}
		.disc {
			height: .5rem;
		}
	}
	.disc {
		display: flex;
		background: #FFFFFF;
		padding: 0 .2rem;
		justify-content: space-between;
		align-items: center;
	}
	.swiper{
		img{
			height: 2.11rem;
			width: 100%;
		}
	}
	.more_button{
		height: .3rem;
		width: 1.6rem;
		line-height: .3rem;
		border: .01rem solid #aaa;
		text-align: center;
		font-size: .12rem;
		cursor: pointer;
		border-radius: .15rem;
		margin:.3rem auto .3rem;
	}
	.soon{
			height: .1rem;
		    margin-top: .3rem;
		    margin-bottom: .3rem;
		    border-bottom: .01rem solid #a8a8a8;
		.upcoming{
		    width: .65rem;
		    height: .2rem;
		    margin: 0 auto;
		    border-radius: .05rem;
		    font-size: .1rem;
		    line-height: .2rem;
		    text-align: center;
		    color: #eee;
		    background-color: #a7a7a7;
	}
	}
	a{
		color: gray;
	}
</style>
